<!--
 * @Description:邀请开店页面
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-9 10:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-15 18:30:01
-->
<template>
	<view class="invitation-container">
		<c-layout>
			<c-navigation-bar navbarBgColor="" leftIconColor="#fff" titleColor="#fff"
				:title="$t('Invitation.Invitation')" slot="head">
			</c-navigation-bar>
			<view class="container-box">
				<view class="user-qr-code">
					<view class="avatar">
						<image style="width: 100%;height: 100%;border-radius: 50%;"
							:src='vuex_user_info.avatar?$u.file.getMedieUrl(vuex_user_info.avatar):$u.file.getMedieUrl(vuex_userDefaultTopImg)' mode=""></image>
					</view>
					<view class="qr-code-box">
						<view class="">
							<!-- <imageForSize size="328" :src="qrCodeSrc"></imageForSize>
							<view class="" style="height: 328rpx;width: 328rpx;" id="qrcode" ref="qrcode">

							</view> -->
							<canvas id="qrcode" canvas-id="qrcode" style="height: 328rpx;width: 328rpx;"></canvas>
							<view class="top-angle" />
							<view class="bottom-angle" />
						</view>
					</view>
					<view class="describe">
						<view class="title">
							{{$t('Invitation.InvitationCode')}}
						</view>
						<view class="code" @click="copyCode(vuex_user_info.invitationCode)">
							{{vuex_user_info.invitationCode}}
							<imageForSize size="36" style="margin-left: 20rpx;" :src="require('@/static/svg/copy-template.svg')" mode="">
							</imageForSize>
						</view>
					</view>
				<view class="describe">
				
					<view class="code2" style="padding: 20rpx;margin: 40rpx 20rpx;">
						<view class="title" style="justify-content: flex-start;color: #000;margin: 20rpx;">
							{{$t('Invitation.inviteLink')}}
							<imageForSize size="36" style="margin-left: 20rpx;" :src="require('@/static/svg/copy-template.svg')" mode="" @click="copyCode(vuex_client_ip + 'pages/login/login?type=register&iCode=' + vuex_user_info.invitationCode + '&open=1',)">
							</imageForSize>
						</view>
						<view class="" style="text-align: start;word-wrap: break-word;">
							{{vuex_client_ip + 'pages/login/login?type=register&iCode=' + vuex_user_info.invitationCode + '&open=1',}}
						</view>
					
					</view>
				</view>
			
				</view>
			
				<view class="btn-box">
					<button type="default" @click="copyCode(vuex_client_ip + 'pages/login/login?type=register&iCode=' + vuex_user_info.invitationCode + '&open=1')">{{$t('Invitation.saveInviteLink')}}</button>
					<!-- <button type="default" @click="invitationRecord">{{$t('Invitation.InvitationRecord')}}</button> -->
				</view>
			</view>
		</c-layout>
	</view>
</template>

<script>
	import UQRCode from 'uqrcodejs'
	export default {
		data() {
			return {
				qrCodeSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F13%2F20210613235426_7a793.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686206009&t=1aaa589324eb110c037853b44dbdad04'
			};
		},
		onShow() {},
		onReady() {
			// console.log(this.publicJS.rpxToPx(328), 999);
			this.appCreateRcode(328, this.vuex_user_info.invitationCode)
			// this.createQRcode(this.publicJS.rpxToPx(328), 'qrcode', this.vuex_user_info.invitationCode)
		},
		methods: {
			// 保存二维码
			savePoster() {
				let that=this
			wx.canvasToTempFilePath({
			        //传入canvas标签上定义的canvas-id,解析图片内容，供后续使用
					canvasId: 'qrcode',
					success: function(res) {
			
						uni.saveImageToPhotosAlbum({
			                //传入解析后的图片数据，并在用户同意授权后将其保存到相册中
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title:that.$t('Invitation.SaveSuccess') ,
									duration: 2000
								});
							},
							fail: () => {
								uni.showToast({
									title:that.$t('Invitation.failToSave')  ,
									duration: 2000,
									icon: "error"
								});
							}
						});
					}
				})
			
			},
			// 邀请记录
			invitationRecord() {
				uni.navigateTo({
					url: "/pages/invitationRecord/invitationRecord"
				})
			},
			// 复制邀请码
			copyCode(code) {
				uni.setClipboardData({
					data: code,
					success: () => {
						this.$u.toast(this.$t('Invitation.SuccessfulReplication'))
					},
					showToast: false
				});
			},
			createQRcode(WIDTH, id, text) {
				// 重复创建二维码会，之前的二维码还在，新创建的会被接在下面
				// 此行代码是为了解决以上问题 或者 刷新二维码的时候生成多个二维码的问题
				if (this.$refs.qrcode) this.$refs.qrcode.innerHTML = ""
				// let long = document.documentElement.clientWidth * (WIDTH / 375)
				new QRCode(id, {
					width: WIDTH,
					height: WIDTH,
					// 邀请码
					text: this.vuex_client_ip + 'pages/login/login?type=register&iCode=' + text + '&open=1',
					correctLevel: QRCode.CorrectLevel.L
				});
			},
			appCreateRcode(size, text) {
				console.log('size', size);
				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = this.vuex_client_ip + 'pages/login/login?type=register&iCode=' + text + '&open=1';
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = this.publicJS.rpxToPx(size);
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			exportRcode() {
				setTimeout(() => {
					uni.canvasToTempFilePath({
							canvasId: 'qrcode',
							fileType: 'jpg',
							width: 328,
							height: 328,
							success: res => {
								console.log(res,'11');
							},
							fail: err => {
								console.log(err);
							}
						},
						// this // 组件内使用必传当前实例
					);
				}, 300);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.invitation-container {
		height: 100vh;
		background-color: #2934D0;
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
		/deep/ .nav-back-title {
			.title {
				color: #fff;
			}

		}

		/deep/ .nav-search {
			background-color: transparent !important;

			.u-icon .u-icon__icon {
				color: #fff !important;
			}
		}

		.container-box {
			height: 100%;
			overflow: auto;

			.user-qr-code {
				top: 100rpx;
				bottom: 200rpx;
			left: 15px;
			overflow: auto;
			right: 15px;
				border-radius: 40rpx;
				background-color: #fff;
				position: absolute;

				.avatar {
					left: 51%;
					top: 220rpx;
					transform: translate(-50%, -50%);
					position: fixed;
					width: 172rpx;
					height: 172rpx;
					border-radius: 50%;
					border: 7rpx solid #2934D0;
					padding: 10rpx;
					overflow: hidden;
					background-color: #fff;
				}

				.qr-code-box {
					padding-top: 178rpx;
					display: flex;
					justify-content: center;

					>view {
						width: 372rpx;
						height: 364rpx;
						align-items: center;
						display: flex;
						justify-content: center;
						position: relative;

						>.qrcode {
							canvas {
								width: 100% !important;
								height: 100% !important;
							}
						}

						>.bottom-angle,
						.top-angle {
							position: absolute;
							width: 100%;

							&::after,
							&::before {
								position: absolute;
								content: "";
								border: 4rpx solid #2934D0;
								width: 32rpx;
								height: 29rpx;
							}
						}

						.top-angle {
							top: 0;

							&::after {
								top: 0;
								right: 0;
								border-left-color: transparent;
								border-bottom-color: transparent;
							}

							&::before {
								top: 0;
								left: 0;
								border-right-color: transparent;
								border-bottom-color: transparent;
							}
						}

						.bottom-angle {
							bottom: 0;

							&::after {
								border-left-color: transparent;
								border-top-color: transparent;
								bottom: 0;
								right: 0;
							}

							&::before {
								border-right-color: transparent;
								border-top-color: transparent;
								bottom: 0;
								left: 0;
							}
						}
					}
				}

				.describe {
					margin-top: 54rpx;
					text-align: center;

					.title {
						font-size: 36rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.code {
						margin-top: 18rpx;
						font-size: 28rpx;
						line-height: 28rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.code2{
					
						    font-size: 14px;
						    font-family: JetBrains Mono-Medium-Regular,JetBrains Mono-Medium;
						    font-weight: 500;
						    color: #666666;
						    line-height: 20px;
						    background: #F5F6F8;
						    border-radius: 20rpx;
						    padding: 18px 16px;
						    margin-top: 12px;
					}
				}
			}

			.btn-box {
				position: fixed;
				bottom: 10px;
				left: 15px;
				right: 15px;
				button:first-child {
					background: #323755;
					margin-bottom: 28rpx;
				}

				button:nth-child(2) {
					background: #323755;
					margin-bottom: 28rpx;
				}
			}
		}
	}
</style>